<template>
    <div class="impottGoods">
        <el-dialog title="提示" :visible.sync="dialogVisible" width="700px" @close="handleClose">
            <!-- 标题部分 -->
            <div slot="title" class="dialog_title">
                <div class="dialog_title_Left">
                    <span>{{ title }}</span>
                    <div class="goodsNum">
                        已选择货品数：
                        <div>
                            <span>0</span>
                            <span>|</span>
                            <span>清空</span>
                        </div>
                    </div>
                </div>
                <div class="dialog_title_Right">
                    <el-input placeholder="商品名称" prefix-icon="el-icon-search" v-model="searchValue"
                        style="border-radius: 30px;" size="small"></el-input>
                </div>
            </div>
            <!-- 商品表格 -->
            <div class="dialog_conten">
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" max-height="300px"
                    @selection-change="handleSelectionChange" :header-cell-style="{ background: '#F8FBFF' }">
                    <el-table-column type="selection" width="45">
                    </el-table-column>
                    <el-table-column label="商品分类" width="100" align="center">
                        <template>
                            <p>抹茶奶冰</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品名称" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="address" label="规格" align="center" width="60">
                        <!-- <template slot-scope="scope">个</template> -->
                        <template>个</template>
                    </el-table-column>
                    <el-table-column prop="address" label="建议售价" width="120" align="center">
                        <template>
                            <p>￥ 10.00 </p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="剩余库存" width="100" align="center">
                        <template>
                            <p>10</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="导入数量" width="80" align="center">
                        <template>
                            <div>
                                <el-input v-model="searchValue" size="mini"></el-input>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: {
        dialogVisible: Boolean
    },
    data() {
        return {
            // dialogVisible: true,
            title: '导入商品',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            multipleSelection: [],
            searchValue: '',//搜索框输入值
            isShow: false,
        }
    },
    computed: {

    },
    watch: {

    },
    methods: {
        handleClose() {
            this.$emit('updateDialogVisible', false);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
}
</script>
<style lang="scss" scoped>
.dialog_title {
    display: flex;
    align-items: center;

    .dialog_title_Left {
        font-size: 15px;
        display: flex;

        .goodsNum {
            margin-left: 10px;
            font-size: 14px;
            display: flex;
            height: 18px;

            div {
                color: #1989FA;
                display: flex;
                align-items: center;

                span {
                    margin-right: 5px;
                }
            }
        }
    }


    .dialog_title_Right {
        margin-left: 10%;
    }
}

// 搜索框
::v-deep {
    .dialog_title_Right {
        width: 200px;

        .el-input__inner {
            border-radius: 30px;
        }
    }
}
</style>